Summary:

These changes are intended to resolve #11068.
This pull request is an adjustment to #35929 which had issues with it's implementation and had to be reverted. (commit: c1eec4c)

Changelog:

[Android] [Fixed] - Fix letters duplication when using autoCapitalize

Test Plan:

I have added an example to the TextInputSharedExamples.js which can demonstration the fix.

Here is a short video showing the following:

• No duplicate characters
• Characters are updated to be lowercase
• Long pressing delete properly deletes, doesn’t stop after deleting one character
• Suggestions (selected from keyboard) work and are updated to lowercase when it becomes part of the input text
• Moving the cursor and typing works, cursor position is kept as it should
• Moving the cursor and deleting works
• Selection portion and deleting it works, cursor position is kept as it should

Note: I have tested with latest main, 0.72.3, commit before mine: 3c6dbec
Note2: I have tested on Emulator where I can reproduce the original issue. On real device (Samsung A52s 5G) I could reproduce it using Samsung Keyboard, I could not reproduce it on the same device with Gboard.

Here is a longer version which goes through the TextInput examples: typing, clearing, selection, cut, paste etc.
So to ensure this indeed does not cause the same issues as #35929 did.
Uploaded to youtube, because it was too big: https://youtu.be/5IEzXYpfa7w

Possible Future Improvements

As it can be seen the video, the letter duplication is resolved, however since the lowercase modification happens on the Javascript side, it takes a couple milliseconds and the Uppercase can still be shown momentarily while typing.

Technical details, why the solution works

I've debugged a simple AppCompatEditText with calling the same getText().replace in doAfterTextChanged with a bit of delay and noticed a difference to the ReactEditText.

The ReactEditText removes the android.view.inputmethod.ComposingText Span in manageSpans before calling replace (ComposingText is Spanned.SPAN_EXCLUSIVE_EXCLUSIVE).
That ComposingText Span is used in android.view.inputmethod.BaseInputConnection private replaceText to find from what point the text should be replaced from when applying suggestions or typing new letters. Without that Span, it defaults to the selection position, which is usually the end of the text causing duplication of the old "word".

In simple terms, while typing with suggestions on the keyboard, each new letter is handled similarly as clicking a suggestion would be, aka replacing the current "word" with the new "word". (let's say "Ar" word with "Are" word)

Another way to describe it:
While typing with suggestions, with the ComposingText Span the TextView keeps track of what word completions are suggested for on the keyboard UI. When receiving a new letter input, it replaces the current "word" with a new "word", and without the Span, it replaces nothing at the end (selection point) with the new word which results in character duplication.

It also seems to make sense then why without suggestions (like password-visible and secureTextEntry) the issue hasn't occurred.

Examples

How the issue happened:

• User types: A (ComposingText Span becomes (0,1), composingWord: "A")
• Javascript replaced A with a, ComposingText Span was removed from getText()
• User types a new character: r (ComposingText, defaulting to selection, from selection, empty string is replaced with word "Ar")
  => Complete text: aAr => letter duplication.

How it works with the changes applied:

• User types: A (ComposingText Span becomes (0,1), composingWord: "A")
• Javascript replaces A with a, (ComposingText Span (0,1) is re-set after replace)
• User types a new character: r (ComposingText (0,1), "a" word is replaced with word "Ar". ComposingText becomes (0,2) "Ar")
• Javascript replaced Ar with ar, (ComposingText Span (0,2) is re-set after replace)
  => Complete text: ar => no letter duplication
• User selects suggestion "Are" (ComposingText Span (0,2) "ar" is replaced with new word and space "Are ")
• CompleteText: "Are "
• Javascript replaces "Are " with "are " (ComposingText Span doesn't exist, no string after space " ")

Note: the Editable.replace also removes the ComposingText, if it doesn't cover the whole text, that's why we need to re-setSpan them even if we wouldn't remove them in manageSpans.